<template>
	<view class="gap" v-if="show" @touchmove.stop="" @tap.stop="" :style="{backgroundColor:background}">
		<view class="gap-body">
			<view class="gap-header grace-space-between">
				<text class="gap-header-btn" :style="{color:cancelTColor}" @tap="close">{{cancelText}}</text>
				<text class="gap-header-btn" :style="{textAlign:'right', color:confirmColor}"
					@tap="confirm">{{confirmText}}</text>
			</view>
			<picker-view :indicator-style="indicatorStyle" class="gap-main" :value="defaultVal" @change="change">
				<picker-view-column v-if="level >= 1">
					<text class="gap-item" v-for="(item, index) in province" :key="index">{{item.name}}</text>
				</picker-view-column>
				<picker-view-column v-if="level >= 2">
					<text class="gap-item" v-for="(item, index) in shilist" :key="index">{{item.name}}</text>
				</picker-view-column>
				<picker-view-column v-if="level >= 3">
					<text class="gap-item" v-for="(item, index) in area[defaultVal[0]][defaultVal[1]]"
						:key="index">{{item.label}}</text>
				</picker-view-column>
			</picker-view>
		</view>
	</view>
</template>
<script>
	// import provinceData from '../data/city-data/province.js';
	// import cityData from '../data/city-data/city.js';
	import areaData from '../data/city-data/area.js';
	export default {
		name: "graceAddressPicker",
		props: {
			show: {
				type: Boolean,
				default: true
			},
			background: {
				type: String,
				default: 'rgba(0, 0, 0, 0.5)'
			},
			cancelText: {
				type: String,
				default: '取消'
			},
			cancelTColor: {
				type: String,
				default: '#888888'
			},
			confirmText: {
				type: String,
				default: '确定'
			},
			confirmColor: {
				type: String,
				default: '#3688FF'
			},
			value: {
				type: Array,
				default () {
					return [0, 0]
				}
			},
			level: {
				type: Number,
				default: 3
			},
			channel_id: {
				type: String,
				default: "1"
			}
		},
		data() {
			return {
				// provinceData   : [],
				indicatorStyle: 'height:35px',
				province: [],
				// city           : cityData,
				// area           : areaData,
				defaultVal: [0, 0, 0],
				shilist: [],
				sheng_code: 11,
				shi_code: 0,
				shi_name: '暂无',
			}
		},
		created() {
			this.defaultVal = this.value;
			console.log(this.channel_id);
			var vm = this
			this.myPost(
				'api/Publicapi/get_city', {},
				function(res) {
					vm.province = res.data.child;
					vm.get_shi(res.data.child[0].code);
				}
			)
		},
		methods: {
			// 通过省获取市
			get_shi(code) {
				var vm = this
				this.myPost(
					'api/Publicapi/get_city', {
						pid_ocde: code
					},
					function(res) {
						vm.shilist = res.data.child;
						return res.data.child
					}
				)
			},
			//
			change: function(e) {
				var res = e.detail.value;
				if (!res[0]) {
					res[0] = 0;
				}
				if (!res[1]) {
					res[1] = 0;
				}
				if (!res[2]) {
					res[2] = 0;
				}
				this.defaultVal = res;
				if (this.province[this.defaultVal[0]].code != this.sheng_code) {
					this.get_shi(this.province[this.defaultVal[0]].code);
					this.sheng_code = this.province[this.defaultVal[0]].code;
				}
				console.log(this.shilist);

				// if(typeof this.shilist!='undefined'){
				// 	this.shi_code=this.shilist[this.defaultVal[1]].c_code;
				// 	this.shi_name=this.shilist[this.defaultVal[1]].c_name;
				// }



			},
			confirm: function() {
				console.log(this.province)
				console.log(this.shilist)
				console.log(this.defaultVal)
				var codes = [
					this.shilist[this.defaultVal[1]].code,
					// this.shilist[1].code,
					// this.get_shi(this.province[this.defaultVal[0]].c_code).c_code,
					// cityData[this.defaultVal[0]][this.defaultVal[1]].value,
					// areaData[this.defaultVal[0]][this.defaultVal[1]][this.defaultVal[2]].value ? areaData[this.defaultVal[0]][this.defaultVal[1]][this.defaultVal[2]].value : 0
				];
				var names = [
					this.province[this.defaultVal[0]].name,
					this.shilist[this.defaultVal[1]].name,
					// this.get_shi(this.province[this.defaultVal[0]].c_code).c_name,

					// cityData[this.defaultVal[0]][this.defaultVal[1]].c_name,
					// areaData[this.defaultVal[0]][this.defaultVal[1]][this.defaultVal[2]].label ? areaData[this.defaultVal[0]][this.defaultVal[1]][this.defaultVal[2]].label : ''
				];
				
				// console.log(codes)
				// codes = codes.splice(1, this.level);
				// console.log(codes);
				names = names.splice(0, this.level);
				var res = {
					codes: codes,
					names: names,
					indexs: this.defaultVal
				};
				this.$emit('confirm', res);
			},
			close: function() {
				this.$emit('close');
			}
		}
	}
</script>
<style scoped>
	.gap {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		bottom: 0;
		z-index: 998;
	}

	.gap-body {
		background-color: #FFFFFF;
		position: absolute;
		z-index: 999;
		bottom: 0;
		left: 0;
		width: 100%;
	}

	.gap-header {
		padding: 25rpx;
	}

	.gap-header-btn {
		width: 200rpx;
		line-height: 38rpx;
		height: 38rpx;
		display: block;
		font-size: 28rpx;
	}

	.gap-main {
		width: 100%;
		height: 280px;
	}

	.gap-item {
		display: block;
		width: 100%;
		height: 35px;
		font-size: 12px;
		line-height: 35px;
		overflow: hidden;
		text-align: center;
	}
</style>
